<template>
	<view class="create-post-page">
		<view class="form-section">
			<view class="label">标题</view>
			<input 
				class="input" 
				v-model="form.title" 
				placeholder="请输入标题" 
				maxlength="128"
			/>
		</view>
		
		<view class="form-section">
			<view class="label">正文</view>
			<textarea 
				class="textarea" 
				v-model="form.content" 
				placeholder="请输入正文内容..." 
				maxlength="2000"
			/>
		</view>
		
		<view class="form-section">
			<view class="label">图片</view>
			<view class="image-upload">
				<view v-if="form.imageUrl" class="image-preview">
					<image 
						class="preview-img" 
						:src="getImageUrl(form.imageUrl)" 
						mode="aspectFill"
					/>
					<view class="remove-btn" @click="removeImage">×</view>
				</view>
				<view v-else class="upload-btn" @click="chooseImage">
					<text class="upload-icon">📷</text>
					<text class="upload-text">选择图片</text>
				</view>
			</view>
		</view>
		
		<button 
			class="submit-btn" 
			:disabled="submitting || !form.title.trim()" 
			@click="submit"
		>
			{{ submitting ? '发布中...' : '发布' }}
		</button>
	</view>
</template>

<script>
import { api } from '../../utils/request.js'
import { BASE_URL } from '../../utils/server.js'

export default {
	data() {
		return {
			form: {
				title: '',
				content: '',
				imageUrl: ''
			},
			submitting: false
		}
	},
	methods: {
		chooseImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0]
					this.uploadImage(tempFilePath)
				}
			})
		},
		async uploadImage(filePath) {
			uni.showLoading({ title: '上传中...' })
			try {
				const res = await api.uploadPostImage(filePath)
				if (res.code === 0) {
					this.form.imageUrl = res.data
					uni.hideLoading()
				} else {
					uni.hideLoading()
					uni.showToast({ icon: 'none', title: res.message || '上传失败' })
				}
			} catch (e) {
				uni.hideLoading()
				uni.showToast({ icon: 'none', title: '上传失败' })
			}
		},
		removeImage() {
			this.form.imageUrl = ''
		},
		getImageUrl(url) {
			if (!url) return ''
			if (url.startsWith('http')) return url
			return BASE_URL + url
		},
		async submit() {
			if (!this.form.title.trim()) {
				uni.showToast({ icon: 'none', title: '请输入标题' })
				return
			}
			
			this.submitting = true
			try {
				const res = await api.createPost(this.form)
				if (res.code === 0) {
					uni.showToast({ title: '发布成功' })
					setTimeout(() => {
						uni.navigateBack()
					}, 600)
				} else {
					uni.showToast({ icon: 'none', title: res.message || '发布失败' })
				}
			} catch (e) {
				uni.showToast({ icon: 'none', title: '发布失败' })
			} finally {
				this.submitting = false
			}
		}
	}
}
</script>

<style>
.create-post-page {
	padding: 30rpx;
	background: #f5f5f5;
	min-height: 100vh;
}

.form-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.label {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	margin-bottom: 20rpx;
}

.input {
	width: 100%;
	font-size: 28rpx;
	color: #333;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.textarea {
	width: 100%;
	min-height: 300rpx;
	font-size: 28rpx;
	color: #333;
	line-height: 1.6;
}

.image-upload {
	margin-top: 20rpx;
}

.upload-btn {
	width: 200rpx;
	height: 200rpx;
	border: 2rpx dashed #ddd;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fafafa;
}

.upload-icon {
	font-size: 60rpx;
	margin-bottom: 10rpx;
}

.upload-text {
	font-size: 24rpx;
	color: #999;
}

.image-preview {
	position: relative;
	width: 200rpx;
	height: 200rpx;
	border-radius: 12rpx;
	overflow: hidden;
}

.preview-img {
	width: 100%;
	height: 100%;
}

.remove-btn {
	position: absolute;
	top: 0;
	right: 0;
	width: 50rpx;
	height: 50rpx;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40rpx;
	line-height: 1;
	border-radius: 0 0 0 12rpx;
}

.submit-btn {
	margin-top: 40rpx;
	background: linear-gradient(135deg, #39c5bb, #54e0c7);
	color: #fff;
	border-radius: 20rpx;
	padding: 24rpx 0;
	font-size: 32rpx;
	width: 100%;
}

.submit-btn[disabled] {
	opacity: 0.6;
}
</style>

